<template>
    <el-row :gutter="20" style="box-sizing: border-box;margin: 0px;padding: 20px;">
        <el-col :span="24" style="margin:10px">
            <el-tag>客户姓名：{{ginfo.name}}</el-tag>
            <el-tag>{{ginfo.sex?'男':'女'}}</el-tag>
            <el-tag>客户电话：{{ginfo.phone}}</el-tag>
            <el-tag>账户余额：{{ginfo.balance}}</el-tag>
            <el-tag>赠送余额：{{ginfo.giftbalance}}</el-tag>
            <el-tag>会员卡号：{{ginfo.vipcard}}</el-tag>
            <el-tag>会员等级：{{ginfo.vipname}}</el-tag>
            <el-tag>起初状态：{{ginfo.initial_info?'已审核':'未审核'}}</el-tag>
            <el-button type="danger" size="small" icon="el-icon-warning" @click="resetPassWord">重置密码</el-button>
            <el-button-group class="ml" v-show="ginfo.initial_info===0">
                <el-button size="small" type="warning" icon="el-icon-edit" @click="setQichu">编辑起初</el-button>
                <el-button size="small" type="primary" icon="el-icon-check" @click="finish">确定审核</el-button>
            </el-button-group>
        </el-col>
        <el-col :span="14">
            <el-alert type="info" :closable="false" title="客户卡未使用项目列表" class="w300"></el-alert>
            <el-table :data="slist" :stripe="true" empty-text="无任何可用项目" height="600">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="sname" label="项目" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="cardtype" label="所属类型">
                    <template slot-scope="scope">
                        <el-tag size="mini" v-if="scope.row.cardtype==1">期卡</el-tag>
                        <el-tag type="info" size="mini" v-else>疗程卡</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="原价"></el-table-column>
                <el-table-column prop="disprice" label="折扣价"></el-table-column>
                <el-table-column prop="num" label="总数">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cardtype==1">不限次数</span>
                        <span v-else>{{scope.row.num}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="nownum" label="剩余数">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cardtype==1">不限次数</span>
                        <span v-else>{{scope.row.nownum}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="endtime" label="有效期" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.cardtype===1">{{scope.row.endtime|hourTime}}</span>
                        <span v-else>用完为止</span>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="10">
            <el-alert type="info" :closable="false" title="客户未使用产品列表" class="w300"></el-alert>
            <el-table :data="glist" :stripe="true" empty-text="无任何可用产品" height="600">
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="gname" label="产品" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="price" label="原价"></el-table-column>
                <el-table-column prop="disprice" label="折扣价"></el-table-column>
                <el-table-column prop="num" label="总数"></el-table-column>
                <el-table-column prop="nownum" label="剩余数"></el-table-column>
                <el-table-column prop="isgift" label="是否赠送">
                    <template slot-scope="scope">
                        <span class="el-icon-h-shi green" v-if="scope.row.isgift"></span>
                        <span class="el-icon-h-fou red" v-else></span>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
    </el-row>
</template>
<script>
import C from '#/src/common/common.js'


export default {
    name: 'guestDetail',
    data() {
        return {
            ginfo: {},
            slist: [],
            glist: [],
            gid: ''
        }
    },
    methods: {

        async resetPassWord() {
            C.confirm('重置当前客户密码为当前手机号, 是否继续?', async() => {
                let res = await C.ajax('/shop/guest/resetpassword', { gid: this.ginfo.id })
                if (res) {
                    C.success(res.data)
                }
            })
        },

        setQichu: async function() {
            let res = await C.openBrowserWindow('/editGuestInitial', { gid: this.gid }, {
                width: 1400,
                height: 880,
                transparent: true,
                // openDevTools: true,
                frame: false,
                useSpa: true,
                spaModel: 'shop'
            })
            if (res) C.success(res.data)
            this.queryGinfo()
        },

        finish: async function() {
            C.confirm('确定审核后将不能编辑起初！', async() => {
                let data = await C.ajax('/shop/guest/checkfinshinitial', { id: this.gid }, 'post')
                if (data) {
                    C.closeBrowserWindow(data)
                }
            })
        },

        async queryGinfo() {
            let res = await C.ajax('/shop/guest/queryginfo', { id: this.gid }, 'post')
            if (res) {
                this.ginfo = res.ginfo
                this.slist = res.slist
                this.glist = res.glist
            }
        },

    },
    mounted: function() {
        let Request = C.getDatas()
        this.gid = Request.guestid
        this.queryGinfo()
    }
}
</script>